<template>
  <div class="container">
    <div class="btnClose">
      <router-link to="/">
        <span class="iconfont iconicon-test"></span>
      </router-link>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <!-- 用户名输入框 -->
    <myipt
      type="text"
      placeholder="用户名/手机号码"
      msg="请输入正确的手机号码"
      :rule="/^1[3456789]\d{9}$/"
      @valchange="setusername"
    ></myipt>
    <!-- 密码输入框 -->
    <myipt
      type="password"
      placeholder="密码"
      msg="请输入正确的密码"
      :rule="/^\d{9}$/"
      @valchange="setpassword"
    ></myipt>
    <!-- 登录框 -->
    <mybtn btntext="登录" @clicked="login"></mybtn>
  </div>
</template>

<script>
import myipt from "../components/myinput";
import mybtn from "../components/mybtn";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  components: {
    myipt,
    mybtn,
  },
  methods: {
    setusername(data) {
      this.username = data;
    },
    setpassword(data) {
      this.password = data;
    },
    login() {
      //   console.log("湖人总冠军，詹姆斯MVP");
      console.log(this.username);
      console.log(this.password);
      if (!this.username || !this.password) {
        this.$toast.fail("请输入完整的信息");
        return;
      }
      this.$axios({
        method: "post",
        url: "/login",
        data: { username: this.username, password: this.password },
      }).then((res) => {
        console.log(res.data);
        if (res.data.message === "登录成功") {
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem("userId", res.data.data.user.id);
          console.log(res.data.message);
          this.$toast.success(res.data.message);
          this.$router.push({ name: "personal" });
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
.container {
  padding: 24/360 * 100vw;
}
.btnClose {
  .iconfont {
    font-size: 28/360 * 100vw;
  }
}
.logo {
  text-align: center;
  .iconfont {
    font-size: 126/360 * 100vw;
    color: #d81e06;
  }
}
</style>